import React, { Component } from 'react';
import { Button, Tree, Popover, Upload } from 'antd'
import { RadiusSettingOutlined, CloudUploadOutlined, DashOutlined, } from '@ant-design/icons'
import PropTypes from 'prop-types'
import ModalLay from '@/components/ModalLay'
import './UploadFile.scss'
let { DirectoryTree } = Tree;



class UploadFile extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imageList: ['https://demo.hashmart.com.cn/storage/local/20230331/6122ae49c3f4e462a73ff2f171214521.png'],//用户选择的集合
            typeId: null,
            showModal: false,
            treeData: [
                {
                    name: '国庆素材',
                    id: 0,
                    list: [
                        {
                            name: '学生主题',
                            id: 1,
                        },
                        {
                            name: '学习主题',
                            id: 2,
                        },
                    ],
                },
                {
                    name: '五一素材',
                    id: 3,
                    list: [
                        {
                            name: '动漫主题',
                            id: 4,
                        },
                        {
                            name: '朋克主题',
                            id: 5,
                        },
                    ],
                },
            ],//数据源
        };
    }
    //文件上传配置
    uploadProps = {
        name: 'file',
        action: '/api/admin/system.attachment/uploadPicture',
        data: { cate_id: 0 },
        headers: {
            'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDQ0MjM3MDIsIm5iZiI6MTcwNDQyMzcwMiwiZXhwIjoxNzA1MDI4NTAyLCJkYXRhIjp7ImlkIjoxLCJyb2xlX2lkIjoxLCJuaWNrbmFtZSI6ImFkbWluIiwiYXZhdGFyIjoiIn19.6WAG5a6pxEZ9LHyK-1mNtwXdULgt5vmC1ZAJJ252rUM',
        },
    }
    componentDidMount() {
        // this.setState({
        //     treeData: 
        // })
    }
    //使用资源
    giveImage = () => {
        this.props.onGive(this.state.imageList);
    }
    //打开模态框
    modalShow = (id) => {
        this.setState({ showModal: true, typeId: id })
    }
    //关闭模态框
    closeModal = () => {
        this.setState({ showModal: false })
    }
    //模板
    template = (title, id) => {
        return (
            <div className='UploadFile-title'>
                <span>{title}</span>
                <Popover rootClassName='popover' content={<Button onClick={this.modalShow.bind(this, id)} block>添加分类</Button>} placement='bottom'>
                    <DashOutlined />
                </Popover>
            </div>
        )
    }
    render() {
        let { showModal, treeData } = this.state;
        console.log(treeData);
        return (
            <>
                <div className='UploadFile'>
                    <div className='UploadFile-tree'>
                        {this.template('全部资源')}
                        {/* 树 */}
                        <DirectoryTree

                            titleRender={(nodeDate) => {
                                return this.template(nodeDate.name, nodeDate.id)
                            }}
                            blockNode
                            fieldNames={{
                                title: "name",
                                key: 'id',
                                children: 'list'
                            }}
                            treeData={treeData}
                        />
                    </div>
                    <div className='UploadFile-list'>
                        <div className='UploadFile-list-btn'>
                            <Upload {...this.uploadProps} multiple>
                                <Button type="primary" icon={<CloudUploadOutlined />} >
                                    Download
                                </Button>
                            </Upload>
                            <Button onClick={this.giveImage} type="primary" icon={<RadiusSettingOutlined />}>
                                使用资源
                            </Button>
                        </div>
                        <div className='UploadFile-list-image'></div>
                    </div>
                </div >
                {/* 添加分类 */}
                <ModalLay title='添加分类' isModalOpen={showModal} onCloseModal={this.closeModal} onOkModal={this.closeModal}></ModalLay>
            </>
        );
    }
}
UploadFile.propTypes = {
    onGive: PropTypes.func,
    num: PropTypes.number.isRequired
}
export default UploadFile;